<template>
  <div>
    <n-card>
      <n-form
        inline
        label-align="left"
        label-placement="left"
        :model="data.formValue"
        ref="formRef"
      >
        <n-form-item v-for="(item, index) in data.formList" :key="index" :label="item.label">
          <component
            v-model:value="data.formValue[item.enName]"
            :is="item.type"
            :size="item.size"
            :clearable="item.clearable"
            :style="{ width: item.width }"
            :options="item.options"
          ></component>
        </n-form-item>
        <n-form-item>
          <n-button type="primary" size="small" @click="search">添加新设置</n-button>
        </n-form-item>
      </n-form>
      <n-data-table ref="table" :columns="data.columns" :data="data.data" :pagination="data.pagination"></n-data-table>
    </n-card>
  </div>
</template>

<script lang="ts">
import { h,defineComponent, getCurrentInstance } from 'vue';
import { NButton } from 'naive-ui';
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance() as any;
    const data = () => {
      return {
        formValue: {},
        pagination: { pageSize: 10 },
        data: [
          {
            key: 0,
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            button: ['编辑', '删除'],
          },
          {
            key: 1,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            button: ['编辑', '删除'],
          },
          {
            key: 2,
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park',
            button: ['编辑', '删除'],
          },
        ],
        columns: [
          { title: '序号', key: '' },
          { title: '行业领域', key: '' },
          { title: '学习内容设置', key: '' },
          { title: '学习类型', key: '' },
          { title: '每日学习设置字段', key: '' },
          {
            title: '操作',
            key: 'button',
            render(row) {
              const button = row.button.map((tagKey) => {
                return h(
                  NButton,
                  {
                    style: {
                      marginRight: '10px',
                    },
                    type: 'info',
                    size: 'small',
                    onClick: () => sendMail(row),
                  },
                  {
                    default: () => tagKey,
                  }
                );
              });
              return button;
            },
          },
        ],
        formList: [
          {
            label: '行业领域',
            type: 'n-select',
            enName: 'aaa',
            width: '200px',
            clearable: true,
            size: 'small',
            options: [
              { label: '徐力333', value: 1 },
              { label: '徐丽丽李333', value: 2 },
            ],
          },
        ],
      };
    };
    //搜索
    const info = (row) => {
      proxy.$message.success(row);
    };
    //按钮点击
    const sendMail = (row) => {
      console.log(row)
    }
    return {
      data: data(),
      info,
      sendMail,
    };
  },
});
</script>

<style>

</style>
